Warn / Error

Image with src "~" was detected as the Largest Contentful Paint (LCP). Please add the loading="eager" property if this image is above the fold.

Cause

Largest Contentful Paint (LCP)는 웹 성능(Core Web Vitals) 지표로 사용자가 웹페이지에 접속했을 때 화면(Viewport) 내에서 가장 큰 시각적 요소가 완전히 그려지는 데 걸리는 시간을 말한다. 보통 2.5초 이내로 측정되는 것이 권장된다.

Next.js Image의 loading(이전의 priority) 속성의 기본값은 lazy로, 사용자의 스크롤에 따라 이미지가 화면(Viewport )에 거의 다가왔을 때 다운로드를 시작하도록 하는 속성이다. 이를 통해 네트워크 자원을 아낄 수 된다. 이를 eager 속성으로 변경하면, 이미지를 발견 즉시 다운로드를 시작하게 변경된다. 그러니 위 경고는 화면에 바로 보여야하는 이미지이니, 빠르게 보여질수 있도록 설정해두라는 의미이다.

그런데 대충 육안으로 살펴보아도, 1초도 안되어 화면이 다 그려지는 경우에도 위와 같은 경고가 발생한다. 이는 실제 production 환경 및 네트워크 환경 등 예측하기 힘든 상황을 대비해서, 화면 상단에 위치한(=랜딩시 바로 나타나는) 크기가 큰 이미지가 있다면 선제적으로 알려준다는 듯하다..

또한 첫 화면에 나타나는 이미지이고, 너무 작지만 않다면, 어느 정도의 크기가 된다면, 브라우저는 대부분의 경우 위의 경고를 토해낸다.

Solve

랜딩시 화면(뷰포트)에 바로 보이는/보여야하는 중요한(큰) 이미지가 있다면, eager 속성을 설정하도록 하자.

그 후에도 경고가 뜬다면.. 판단을 내려야한다. 이것이 정말 중요한 이미지인데 빼먹은 것이라면 값을 넣어주면 된다. 만약 아무리 생각해도 그리 중요하지 않은 이미지라면.. 경고를 무시하는 것이 차라리 나을 수 있다고 본다.